<template>
    <n-popover trigger="hover">
        <template #trigger>
            <n-button size="tiny" @click="showPopover = !showPopover" :disabled="props.data.length == 0">
                <n-icon><InboxOutlined /></n-icon>
            </n-button>
        </template>
        <span>打包文件</span>
    </n-popover>
    <!-- -------------------------------------------------- -->
    <div id="com_modal_filePackup" class="quick-item-modal-card quick-item-modal-nomodal">
        <n-modal
            to="#com_modal_filePackup"
            v-model:show="showPopover"
            title="文件打包"
            size="small"
            preset="card"
            draggable
            :trap-focus="false"
            :style="{ maxWidth: '500px' }">
            <div>
                <div>
                    <p>打包方式</p>
                    <n-select
                        v-model:value="select_value"
                        :options="select_options"
                        size="small"
                        @update:value="
                            (_p1: string, p2: SelectOptionItem) => {
                                cmd1 = p2.command
                            }
                        " />
                    <hr style="border: none; margin: 0.25rem" />
                    <p>
                        <span>打包文件名</span>
                        <span
                            style="
                                color: orange;
                                font-size: smaller;
                                text-align: right;
                                float: right;
                                margin-top: 4px;
                            ">
                            <span v-if="input_value == ''">*请输入文件名</span>
                            <span v-else>
                                <span v-if="!/\.(zip|tar|tar\.gz)$/.test(input_value)">
                                    *文件拓展名不合法
                                </span>
                            </span>
                        </span>
                    </p>
                    <n-input v-model:value="input_value" size="small" clearable />
                    <hr style="border: none; margin: 0.25rem" />
                    <p>执行命令</p>
                    <div
                        style="
                            width: 100%;
                            border: 1px solid #00000023;
                            border-radius: 0.25rem;
                            padding: 0.125rem 12px;
                            box-sizing: border-box;
                        ">
                        <p v-html="command" style="font-family: consolas"></p>
                    </div>

                    <p>
                        <span
                            style="
                                border: 1px solid #00000022;
                                padding: 0 0 0 0.25rem;
                                margin-right: 0.25rem;
                                font-size: smaller;
                                border-radius: 0.125rem;
                                user-select: none;
                            ">
                            任务ID
                        </span>
                        <span style="font-size: smaller">{{ task_id }}</span>
                    </p>
                </div>

                <n-space justify="space-between" style="margin-top: 2rem">
                    <div>已选{{ props.data.length }}个路径</div>
                    <n-space>
                        <n-button size="small" @click="handleCancel()">取消</n-button>
                        <n-button
                            size="small"
                            type="primary"
                            @click="handleConfirm()"
                            :disabled="!/\.(zip|tar|tar\.gz)$/.test(input_value)">
                            提交任务
                        </n-button>
                    </n-space>
                </n-space>
            </div>
        </n-modal>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { InboxOutlined } from '@vicons/material'
import { axp_packfile, type DirectoryItem } from '@/utils/interface/Directory'
import { url_join } from '@/utils/tools/url-join'
import { ts_hex } from '@/utils/tools/ts-hex'
import { useMessage } from 'naive-ui'
const message = useMessage()
const showPopover = ref(false)
const command = computed(() => {
    let tmp_packname = input_value.value || '%请输入打包文件名%'
    if (
        input_value.value.indexOf('/') == -1 &&
        input_value.value.indexOf('\\') == -1 &&
        input_value.value != ''
    ) {
        tmp_packname = url_join(props.parent, input_value.value)
    }
    return (
        `${cmd1.value}
    <span style="color:#aa5555">${tmp_packname}</span>
    ${cmd3.value}` || 'nul'
    )
})
const cmd1 = ref('tar -cf')
const cmd3 = computed(() => {
    return props.data
        .map((item: DirectoryItem) => {
            return url_join(props.parent, item.path_name) + ' '
        })
        .join('')
})
const select_value = ref('pack')
const task_id = ref('')

interface SelectOptionItem {
    label: string
    value: string
    command: string
}
const select_options = reactive<Array<SelectOptionItem>>([
    { label: 'tar 仅打包', value: 'pack', command: 'tar -cf' },
    {
        label: 'tar gzip-1/fast最快压缩包',
        value: 'pack+zip1',
        command: 'tar --use-compress-program="gzip -1" -cf'
    },
    {
        label: 'tar gzip-2压缩包',
        value: 'pack+zip2',
        command: 'tar --use-compress-program="gzip -2" -cf'
    },
    {
        label: 'tar gzip-3压缩包',
        value: 'pack+zip3',
        command: 'tar --use-compress-program="gzip -3" -cf'
    },
    {
        label: 'tar gzip-4压缩包',
        value: 'pack+zip4',
        command: 'tar --use-compress-program="gzip -4" -cf'
    },
    {
        label: 'tar gzip-5压缩包',
        value: 'pack+zip5',
        command: 'tar --use-compress-program="gzip -5" -cf'
    },
    { label: 'tar gzip-6标准压缩包', value: 'pack+zip6', command: 'tar -czf' },
    {
        label: 'tar gzip-7压缩包',
        value: 'pack+zip7',
        command: 'tar --use-compress-program="gzip -7" -cf'
    },
    {
        label: 'tar gzip-8压缩包',
        value: 'pack+zip8',
        command: 'tar --use-compress-program="gzip -8" -cf'
    },
    {
        label: 'tar gzip-9/best最小压缩包',
        value: 'pack+zip9',
        command: 'tar --use-compress-program="gzip -9" -cf'
    }
])
const input_value = ref('')
function generate_taskid() {
    task_id.value = ts_hex()
}
function handleCancel() {
    showPopover.value = false
}
async function handleConfirm() {
    const r = await axp_packfile(
        { parent: props.parent, file_list: props.data },
        { task_id: task_id.value, pack_name: input_value.value, pack_method: select_value.value }
    )
    if (r) {
        message.success('打包任务已提交')
        showPopover.value = false
    }
}
/////////////////////////////////////////////
const props = defineProps({
    parent: { type: String, default: '/' },
    data: {
        type: Array<DirectoryItem>,
        default: () => []
    }
})

watch(
    () => showPopover.value,
    (nv, _ov) => {
        if (nv) {
            generate_taskid()
        }
    }
)

defineExpose({}) 
</script>

<style lang="scss" scoped>
#com_modal_filePackup {
    font-weight: 500;
    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0.25rem 0.5rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .item {
        flex-grow: 1;
        font-size: 0.875rem;
    }
}
</style>
